import React, { Component } from 'react'
import ListBar from './ListCart.style'


export default class ListCart extends Component {

    constructor(){
        super();
        this.state ={
            currentIndex:0
        }
    }

    clickHandler(index,event){
        this.setState({
            currentIndex:parseInt(event.currentTarget.getAttribute('index'), 10)
        })
        // console.log(index);
        this.props.comp(index)
    }


    render() {
        return (
            <div>
                <ListBar>
                    {
                        this.props.data.map((item,index)=>{
                            return <li className={this.state.currentIndex === index ?'active':''} index={index} key={index} onClick={this.clickHandler.bind(this,{index})}>{item}</li>
                        })
                    }
                </ListBar>
            </div>
        )
    }
}
